<template>
  <view class="wrapper">
    <view class="container">
      <VueEcharts :option="options" />
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import VueEcharts from 'vue-echarts';
import 'echarts';

// 初始进度值
const props = defineProps({
  data: Object,
});
const options = ref(null);
onMounted(() => {
  upData();
});
const upData = () => {
  options.value = {
    color: ['#00E0AE', '#CAFCE3'],

    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '65%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ],
        label: {
          color: '#6E7B8B',
        },
      },
    ],
  };
};
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		height: 400rpx;
	}
	.container{
		width: 100%;
		height: 100%;
	}
</style>
